<template>
  <el-col :span="12">
    <el-upload
      class="upload-parts"
      :http-request="uploadFile"
      action
      :on-remove="handleClose"
      :before-upload="beforeUpload"
      multiple
      :limit="fileLimit"
      :on-exceed="handleExceed"
      accept=".ini,.xls,.properties"
      :file-list="fileList">
      <el-button size="small">点击上传</el-button>
      <div slot="tip" class="el-upload__tip" style="color: red;">*上传解析类文件类型仅限.ini,.xls,.properties类型文件,通用类文件限定.ini,展示类文件不做显示仅限'pdf', 'doc', 'docx', 'xls', 'xlsx', 'txt', 'png', 'jpg', 'bmp', 'jpeg', 'ini', 'properties'</div>
    </el-upload>
  </el-col>
</template>
<script>
export default {
  data () {
    return {
      // 上传后的文件列表
      fileList: [],
      // 允许的文件类型
      fileType: ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'txt', 'png', 'jpg', 'bmp', 'jpeg', 'ini', 'properties'],
      // 运行上传文件大小，单位 M
      fileSize: 50,
      // 附件数量限制
      fileLimit: 1,
      // 请求头
      headers: { 'Content-Type': 'multipart/form-data' },
      validatorUrl: '',
      rules: {
        url: []
      }
    }
  },
  props: [],
  methods: {
    // 上传文件之前
    beforeUpload (file) {
      if (file.type !== '' || file.type != null || file.type !== undefined) {
        // 截取文件的后缀，判断文件类型
        const FileExt = file.name.replace(/.+\./, '').toLowerCase()
        // 计算文件的大小
        const isLt5M = file.size / 1024 / 1024 < 50 // 这里做文件大小限制
        // 如果大于50M
        if (!isLt5M) {
          this.$showMessage('上传文件大小不能超过 50MB!')
          return false
        }
        // 如果文件类型不在允许上传的范围内
        if (this.fileType.includes(FileExt)) {
          return true
        } else {
          this.$message.error('上传文件格式不正确!')
          return false
        }
      }
    },
    // 上传了的文件给移除的事件，由于我没有用到默认的展示，所以没有用到
    handleRemove () {
    },
    // 这是我自定义的移除事件
    handleClose (i) {
      alert('删除' + i.valueOf() + '文件大小' + this.fileList.length)
      this.fileList.splice(i, 1)// 删除上传的文件
      if (this.fileList.length === 0) { // 如果删完了
        this.fileflag = true// 显示url必填的标识
        this.$set(this.rules.url, 0, { required: true, validator: this.validatorUrl, trigger: 'blur' })// 然后动态的添加本地方法的校验规则
      }
    },
    // 超出文件个数的回调
    handleExceed () {
      this.$message({
        type: 'warning',
        message: '超出最大上传文件数量的限制！'
      })
    },
    // 上传文件的事件
    uploadFile (item) {
      this.$message.info('文件上传中........' + item.file)
      // 上传文件的需要formdata类型;所以要转
      let formData = new FormData()
      formData.append('configFile', item.file)
      this.axios({
        method: 'POST',
        url: 'api/file/fileUpload',
        headers: this.headers,
        timeout: 30000,
        data: formData
      }).then(res => {
        if (res.data.code === 0) {
          this.fileList.push(item.file)// 成功过后手动将文件添加到展示列表里
          let i = this.fileList.indexOf(item.file)
          console.log('fileList' + i)
          this.fileList[i].fileUrl = res.data.data.fileUrl// url也添加进去，最后整个大表单提交的时候需要的
          if (this.fileList.length > 0) { // 如果上传了附件就把校验规则给干掉
            this.fileflag = false
            this.$set(this.rules.url, 0, '')
            this.$notify.success('上传成功')
            this.$emit('uploadFile', this.fileList)
          }
          this.handleSuccess()
        }
      })
    },
    // 上传成功后的回调
    handleSuccess () {
      alert(this.fileLimit.length())
    }
  }
}
</script>
